<template>
  <div class="main-page">
    <!-- 搜索框 -->
    <van-search
  show-action
  label="北京▼"
  placeholder="请输入小区或地址"
  @click="onSearch"
>
  <template #action>
    <div @click="onSearch"><van-icon name="location-o" /></div>
  </template>
</van-search>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swiperlist" :key="item.id"
        ><img :src=" `http://liufusong.top:8080`+ item.imgSrc " alt=""
      /></van-swipe-item>
    </van-swipe>
    <!-- 租房导航选项 -->
    <div class="rent-nav">
      <van-grid :border="false" :column-num="4">
        <van-grid-item>
          <img src="" alt="">
          <p>整租</p>
        </van-grid-item>
        <van-grid-item>
          <img src="" alt="">
          <p>合租</p>
        </van-grid-item>
        <van-grid-item>
          <img src="" alt="">
          <p>地图找房</p>
        </van-grid-item>
          <van-grid-item to="/publish">
          <img src="" alt="">
          <p>去出租</p>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 租房小组 -->
    <div class="rent-group">
      <!-- 标题区域 -->
      <div class="mp-title">
        <h5>租房小组</h5>
        <span>更多</span>
      </div>
      <!-- 小组列表区域 -->
      <ul class="group-list">
        <li v-for="item in grouplist" :key="item.id">
          <div class="left">
            <img :src=" `http://liufusong.top:8080`+ item.imgSrc" alt="">
          </div>
          <div class="right">
            <p>{{ item.title }}</p>
            <p>{{ item.desc }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getSwiper, getRentGroup } from '@/api/rentinfo'
export default {
  name: 'main-page',
  data () {
    return {
      swiperlist: [],
      grouplist: []
    }
  },
  methods: {
    onSearch () {
      this.$router.push('/citylist')
    }
  },
  async created () {
    const res = await getSwiper()
    // console.log(res.body)
    this.swiperlist = res.body
    // 租房小组
    const res1 = await getRentGroup()
    console.log(res1.body)
    this.grouplist = res1.body
  }
}
</script>

<style lang="less" scoped>
.main-page {
  position: relative;
}
.van-search {
  position:absolute;
  top: 25px;
  width: 100%;
  padding: 0 10px 0 18px;
  background-color: transparent;
  z-index: 2;
  font-size: 14px;
  color: #333;
}

.van-swipe {
  width: 100%;
  height: 212px;
  .van-swipe-item{
    text-align: center;
    img {
      width: 100%;
    }
  }
}
  .rent-nav {
    .van-grid {
      .van-grid-item {
        height: 122px;
    img {
      width: 60px;
      height: 60px;
    }
    p {
      font-size: 14px;
    }
    }
    }
  }
  .rent-group {
    height: 188px;
    background-color: #f6f5f6;
    .mp-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h5 {
        font-size: 15px;
        margin:15px 0  15px 10px;
      }
      span {
        font-size: 14px;
        margin-right: 8px;
        color: #787d82;
      }
    }
    .group-list {
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
      li {
        display: flex;
        align-items: center;
        width: 172.5px;
        height: 60px;
        background-color: #fff;
        margin-bottom: 10px;
        border-radius: 5px;
        .left {
          margin: 0 10px;
          img {
          width: 50px;
          height: 50px;
        }
        }
      .right {
        font-size: 14px;
        color: #333;
        p {
          margin:0 0;
        }
      }
      }
    }
  }
</style>
